<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Token Register</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
    <link type="text/css" rel="stylesheet" />
    <style>
        .loading-box {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.7);
            z-index: 999;
        }

        .spinner-box {
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="container" style="display: none;">
        <h1 class="text-center">Token 注册</h1>
        <div class="col-lg-8 col-lg-offset-2">

            <form>
                <div class="form-group">
                    <label for="system">System Name</label>
                    <input type="text" class="form-control" id="system" placeholder="System Name">
                </div>
                <div class="form-group" id="sik">
                    <label for="token">Token</label>
                    <input type="text" class="form-control " id="token" placeholder="Token" readonly>
                </div>
                <div class="form-group" id="prk">
                    <label for="privateKey">Private Key</label>
                    <input type="text" class="form-control " id="privateKey" placeholder="privateKey" readonly>
                </div>
                <div class="form-group" id="puk">
                    <label for="publicKey">Public Key</label>
                    <input type="text" class="form-control " id="publicKey" placeholder="publicKey" readonly>
                </div>
                <button type="button" class="btn btn-success" id="genToken">构建token</button>
                <a href="javascript:;" class="btn btn-link" id="tokenList">Token列表</a>
            </form>
        </div>
    </div>

    <div class="loading-box">
        <div class="spinner-box">
            <img src="/img/loading.gif">
        </div>
    </div>
</body>
<script type="text/javascript">
	var basePath = "/itsu-token";
    $(function () {
        setTimeout(function () {
            init();
        }, 1000)


        function init() {
            $.ajax({
                type: "get",
                url: basePath + "/tokenRegister/type",
                data: {},
                success: function (data) {
                    if (data.status) {
                        if (data.type == 'simple') {
                            $("#sik").removeClass("sr-only")
                            $("#prk").addClass("sr-only")
                            $("#puk").addClass("sr-only")
                        } else if (data.type == 'rsa') {
                            $("#sik").addClass("sr-only")
                            $("#prk").removeClass("sr-only")
                            $("#puk").removeClass("sr-only")
                        } else if (data.type == 'custom') {
                        	$.alert("暂不支持custom type的web register")
                        }
                        $(".container").css("display", "")
                    } else {
                        $.alert("初始化页面数据失败")
                    }
                },
                error: function (error) {
                    $.alert(error.responseText)
                },
                complete: function () {
                    hideLoading();
                }
            });

        }

        function showLoading() {
            $(".loading-box").css("display", "")
        }

        function hideLoading() {
            $(".loading-box").css("display", "none");
        }

        // alert("jquery is ok")
        $("#genToken").on('click', function () {
            var system = $("#system").val();
            if (system == null || system.length == 0) {
                $("#system").parent().addClass("has-error");
                $.alert("System Name must not be empty");
                return false;
            }

            $(this).addClass("disabled").attr("disabled", "true")
            showLoading();
            $.ajax({
                type: "get",
                url: basePath + "/tokenRegister/generate/" + system,
                data: {},
                success: function (res) {
                    if (res.status) {
                        if (res.token) {
                            $("#token").val(res.token)
                        }
                        if (res.privateKey) {
                            $("#privateKey").val(res.privateKey);
                        }
                        if (res.publicKey) {
                            $("#publicKey").val(res.publicKey);
                        }
                    } else {
                        $.confirm({
                            title: 'Warning!',
                            content: res.errorMsg,
                            type: 'orange',
                            typeAnimated: true,
                            buttons: {
                                close: function () {}
                            }
                        });
                    }
                },
                error: function (error) {
                    // console.log(error);
                    $.confirm({
                        title: 'Error!',
                        content: error.responseJSON.error,
                        type: 'red',
                        typeAnimated: true,
                        buttons: {
                            close: function () {}
                        }
                    });
                },
                complete: function () {
                    hideLoading();
                    $("#genToken").removeClass("disabled").removeAttr("disabled")
                }
            });

        })

        $(".form-control").focus(function () {
            $(this).parent().removeClass("has-error");
        })

        function isVisiable(id) {
            return !($("#" + id + "").hasClass("sr-only"))
        }

        function getType() {
            var si = isVisiable("sik");
            var rs = isVisiable("puk");
            if (si && !rs) {
                return "simple";
            } else if (!si && rs) {
                return "rsa";
            } else {
                return "unknown type"
            }
        }

        $("#tokenList").on('click', function () {
            $.ajax({
                type: "get",
                url: basePath + "/tokenListUrl",
                data: {},
                success: function (res) {
                	if(res.indexOf("/") != 0){
						res = basePath + "/" + res;                        		
                	} else {
                		res = basePath + res;
                	}
                    top.location.href = res;
                }
            });

        })
    });
</script>

</html>